<script setup>
import { ref, reactive, computed } from 'vue'
// props
const props = defineProps({
  // 弹窗类型 1 选择规格 2 选择商品 
  type: {
    type: String,
    default: '1'
  },
  show: {
    type: Boolean,
    required: true
  },
  list: {
    type: Object,
    default: () => ([])
  }
})
// emits
const emit = defineEmits(['close', 'confirm'])

// 数据
const info = reactive({
  // 选中SKU
  skuIndex: 0,
  num: 1,
})
const selectInfo = computed(() => {
  return props.list[info.skuIndex] || {}
})
// 关闭弹窗
const close = () => {
  emit('close')
}
// 提交数据--返回选中规格
const confirmData = () => {
  const data = {
    num: info.num,
    info: selectInfo.value
  }
  emit('confirm', data)
}
</script>

<template>
  <!-- 弹窗-选择商品 -->
  <up-popup :show="props.show" :closeable="true" @close="close" :round="10">
    <view class="SelectSpec-module">
      <view class="title">
        <text>选择{{ props.type == 1 ? '规格' : '商品' }}</text>
      </view>
      <view class="cnt">
        <!-- 头部 -->
        <view class="head">
          <view class="left">
            <image style="width: 252rpx; height: 174rpx;" src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
              mode="scaleToFill" />
          </view>
          <!-- 商品价格 -->
          <view class="price-info">
            <view class="present-price">
              <text class="label">售价</text>
              <text class="unit">¥</text>
              <text class="price">{{ selectInfo.price && selectInfo.price.split('.')[0] + '.' }}</text>
              <text class="price-decimal">{{ selectInfo.price && selectInfo.price.split('.')[1] }}</text>
            </view>
            <view class="original-price">
              <text class="price">优惠前¥{{ selectInfo.marketPrice }} </text>
            </view>
            <!-- 降价多少 -->
            <view class="decline-price">
              <image style="width: 40rpx;height: 40rpx;" src="/static/images/icons/price_decline.png"
                mode="scaleToFill" />
              <text class="price">优惠前¥ {{ selectInfo.declinePrice }} </text>
            </view>
          </view>
        </view>
        <!-- 规格选择 -->
        <view class="sku-box">
          <view class="label-box">
            <text>规格</text>
          </view>
          <view class="sku-list">
            <view v-for="(item, i) in list" :key="i" class="item" :class="i == info.skuIndex ? 'active' : ''"
              @click="info.skuIndex = i">
              <text>{{ item.properties[0].valueName }}</text>
            </view>
          </view>
        </view>
        <!-- 数量选择 -->
        <view class="num-box">
          <view class="label-box">
            <text>数量</text>
          </view>
          <view class="num-select">
            <up-number-box v-model="info.num" :min="1" :max="selectInfo.stock"></up-number-box>
            <text class="unit">箱</text>
          </view>
        </view>
        <!-- 库存展示 -->
        <view class="stock-box">
          <text>剩余库存：{{ selectInfo.stock }}</text>
        </view>
      </view>
      <view class="btn-box">
        <view class="btn" @click="confirmData">
          <text>{{ props.type == 1 ? '确认' : '加入购物车' }}</text>
        </view>
      </view>
    </view>

  </up-popup>
</template>

<style lang="scss" scoped>
.SelectSpec-module {
  & .title {
    margin-top: 30rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
    text-align: center;
  }

  & .cnt {
    padding: 40rpx 30rpx;

    // width: 750rpx;
    // 头部
    & .head {
      display: flex;

      & .left {
        width: 252rpx;
        height: 174rpx;
        overflow: hidden;
        border-radius: 10rpx;
      }

      // 右侧价格
      & .price-info {
        margin-left: 30rpx;
        flex: 1;

        // 优惠价格
        & .present-price {
          margin-top: 6rpx;
          font-weight: 500;
          color: #F93A4A;

          & .label {
            font-size: 26rpx;
          }

          & .unit {
            padding-left: 10rpx;
            font-size: 26rpx;
          }

          & .price {
            font-size: 32rpx;
          }

          & .price-decimal {
            font-size: 26rpx;
          }
        }

        // 原价
        & .original-price {
          margin-top: 10rpx;
          font-weight: 400;
          font-size: 20rpx;
          color: #666666;
          text-decoration-line: line-through;
        }

        // 降价多少
        & .decline-price {
          margin-top: 20rpx;
          position: relative;
          width: 184rpx;
          height: 40rpx;
          line-height: 40rpx;
          background: #FFEEED;
          border-radius: 10rpx;
          text-align: center;

          &>image {
            position: absolute;
            left: 0;
            top: 0;
            margin-left: -12rpx;
          }

          & .price {
            font-weight: 400;
            font-size: 20rpx;
            color: #FF1504;
          }
        }
      }
    }

    // 规格选择
    & .sku-box {
      margin-top: 40rpx;
      display: flex;
      justify-content: space-between;

      & .label-box {
        height: 56rpx;
        line-height: 56rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
      }

      & .sku-list {
        & .item {
          margin-bottom: 10rpx;
          width: 444rpx;
          height: 56rpx;
          line-height: 56rpx;
          border-radius: 10rpx;
          border: 1rpx solid #CCCCCC;
          text-align: center;

          & text {
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
          }

          &.active {
            border: 2rpx solid #FFC870;

            & text {
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
            }
          }
        }
      }
    }

    // 数量选择
    & .num-box {
      margin-top: 40rpx;
      display: flex;
      justify-content: space-between;

      & .label-box {
        height: 56rpx;
        line-height: 56rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
      }

      & .num-select {

        display: flex;
        align-items: center;

        & .unit {
          padding-left: 20rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }
      }
    }

    & .stock-box {
      margin-top: 10rpx;
      text-align: right;

      & text {
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
      }
    }
  }

  // 确认按钮
  & .btn-box {
    box-sizing: border-box;
    padding: 42rpx 30rpx 12rpx 30rpx;
    background: #FFFFFF;
    text-align: center;

    & .btn {
      width: 690rpx;
      height: 100rpx;
      background: #FFA618;
      line-height: 100rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
      border-radius: 50rpx;
    }
  }
}
</style>